<template>
  <div class="couponBox">
    <!-- 左侧轮播显示区域 -->
    <div class="informationBox">
      <img src="/src/assets/property/information.png" alt />
      <div class="information-content">
        <div v-for="(item,index) in list[leftIndex].informationInfo" :key="index">{{ item.content }}</div>
      </div>
    </div>
    <!-- 右侧轮播编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightcoupon">
        <!-- 头部提示区域 -->
        <header class="title">资讯设置</header>
        <div class="editCon">
          <div style="margin-top:20px;">
            <span>资讯选择：</span>
            <el-button type="mini" @click="couponDialogVisible=true">添加资讯</el-button>
          </div>
          <div style="margin-top: 10px;margin-left: 80px;">
            <el-tag
              v-for="(itemTag,indexTag) in list[leftIndex].informationInfo"
              :key="indexTag"
              v-if="list[leftIndex].informationInfo[0]"
              closable
              disable-transitions
              style="margin:5px;"
              @close="handleTagClose(indexTag)"
            >{{ itemTag.name }}</el-tag>
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播链接选择课程弹框 -->
    <el-dialog :visible.sync="couponDialogVisible" title="选择课程" width="50%">
      <div>
        <span style="width:100px;">选择班级：</span>
        <el-autocomplete
          v-model="keyWord"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          style="width:300px;"
          @select="handleSelect"
        />
      </div>
      <el-table
        :data="list[leftIndex].informationInfo"
        stripe
        border
        style="width: 100%;margin-top:20px;"
      >
        <el-table-column prop="name" label="资讯名称" />
        <el-table-column prop="content" label="资讯内容" width="350px" />
        <el-table-column prop="endTime" label="有效期至" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="removeLink(scope.$index)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="couponDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="courseConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['list', 'leftIndex'],
  data() {
    return {
      fileList: [],
      keyWord: '',
      couponDialogVisible: false,
      classDialogVisible: false
    }
  },

  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    loadAll() {
      return [
        { 'value': '1', 'price': '12', 'content': '资讯内容公告，最新消息最新课程显示优惠特价放松折扣享不停', 'startTime': '2019-03-30', 'endTime': '2019-10-30' },
        { 'value': '2', 'price': '12', 'content': '限时促销活动火热进行中，买一送二。', 'startTime': '2019-03-30', 'endTime': '2019-10-30' }
      ]
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results)
      }, 1000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      if (this.list[this.leftIndex].informationInfo.length > 4) {
        this.$message({
          message: '最多只能添加五个资讯',
          type: 'warning'
        });
        return
      }
      this.list[this.leftIndex].informationInfo.push({
        name: item.value,
        price: item.price,
        content: item.content,
        residue: item.residue,
        gross: item.gross,
        startTime: item.startTime,
        endTime: item.endTime
      });
      console.log(this.list[this.leftIndex].informationInfo)
    },
    // 链接标签删除
    handleTagClose(index) {
      // this.list[this.leftIndex].couponName = ''
      this.list[this.leftIndex].informationInfo.splice(index, 1)
    },
    // 移除链接列表
    removeLink(index) {
      this.list[this.leftIndex].informationInfo.splice(index, 1)
    },
    // 选择课程确认
    courseConfirm() {
      if (this.list[this.leftIndex].informationInfo.length === 0) {
        this.couponDialogVisible = false;
        return
      }
      // this.list[this.leftIndex].couponName = this.couponTableData[0].name
      this.couponDialogVisible = false;
      this.keyWord = ''
    }
  }
}
</script>
<style lang="scss" >
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.couponBox {
  margin: 10px 0;
  .informationBox {
    display: flex;
    align-items: end;
    padding: 10px;
    img {
      width: 60px;
      height: 25px;
      margin-right: 10px;
    }
    .information-content {
      overflow: hidden;
      text-overflow: ellipsis;
      flex-grow: 1;
      font-size: 14px;
      div {
        margin-top: 7px;
      }
    }
  }
  .image-mask {
    font-weight: 600;
    width: 100%;
    height: 100%;
    background-color: #e1e1e1;
    font-size: 26px;
    color: #919191;
    text-align: center;
    line-height: 194px;
  }
  .couponCard {
    height: 112px;
    overflow: hidden;
    padding: 0 10px;
    .couponCard_body {
      position: relative;
      float: left;
      width: 100%;
      line-height: 1;
      box-sizing: border-box;
      .couponCard_header {
        height: 82px;
        box-sizing: border-box;
        padding: 20px 15px 18px;
        border-top-right-radius: 2px;
        border-top-left-radius: 2px;
        background-color: #ff6969;
        .couponCard_price {
          margin-top: 10px;
          display: inline-block;
          color: #fff;
          font-size: 32px;
          font-weight: 500;
        }
        .couponCard_name {
          position: absolute;
          right: 85px;
          top: 32px;
          line-height: 1.3;
          color: #fff;
          font-size: 10px;
          .text-overflow {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 142px;
          }
        }
        .couponCard_button {
          position: absolute;
          right: 24px;
          top: 32px;
          box-sizing: border-box;
          height: 24px;
          width: 56px;
          line-height: 24px;
          text-align: center;
          font-size: 12px;
          color: #ff5353;
          background-color: #fff;
          border-radius: 4px;
        }
      }
      .couponCard_middle {
        margin-top: -6px;
        margin-bottom: -1px;
        height: 6px;
        background-image: url('../../../../assets/settinyschool/smss.png');
        background-size: 16px 6px;
        background-position-x: 6px;
      }
      .couponCard_bottom {
        padding: 10px;
        background-color: #ff5353;
        color: #fff;
        font-size: 10px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .couponCard_circle——left {
      content: '';
      position: absolute;
      top: 74px;
      left: -5px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
    }
    .couponCard_circle——right {
      content: '';
      position: absolute;
      top: 74px;
      right: -5px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
    }
  }
}
.editRightcoupon {
  width: 400px;
  position: absolute;
  left: 105%;
  top: 0;
  padding: 10px;
  border: 1px solid #e1e1e1;
  background-color: #fafafa;
  .title {
    font-size: 14px;
    padding-bottom: 15px;
    margin: 5px 0;
    border-bottom: 1px solid #e1e1e1;
    .help-text {
      font-size: 12px;
      color: #616161;
      margin-top: 5px;
    }
  }
  .editCon {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #e1e1e1;
  }
}
</style>
